<template>
  <div class="adrecord">
      <div class="selecFrom">
        <el-form ref="form" :model="form" label-width="100px">
  <el-form-item label="HIGO ID">
    <el-input id="input_id" v-model="form.userErbanNo"></el-input>
  </el-form-item>
  <el-form-item :label="$t('form.chargetime')">
    <el-col :span="11">
      <el-date-picker
       :placeholder="$t('form.starttime')" 
       v-model="form.startTime" 
       style="width: 100%;"  
       ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-date-picker
        
       :placeholder="$t('form.endtime')" 
       v-model="form.endTime" 
       style="width: 100%;"
       ></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item :label="$t('form.chargecoins')">
    
<el-input v-model="form.coin"></el-input>
   
  </el-form-item>

   <el-form-item :label="$t('form.cahrgeor')" >
    <el-input v-model="form.orderNo"></el-input>
  </el-form-item>
  <el-form-item :label="$t('form.clcData')" v-if="staticData" >

    
   {{$t('form.people')}}：{{staticData.number}}&nbsp;&nbsp;&nbsp;{{$t('form.coins')}}：{{staticData.totalCoin||0}}
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">{{$t('form.gos')}}</el-button>
    <el-button @click="resetSubmit">{{$t("adbuy.reset")}}</el-button>
  </el-form-item>
        </el-form>
      </div>
      <div>
  <el-button  type="primary" :loading="download" class="exportbtn" @click="exportclick">{{$t('exceldown')}}</el-button>
 <div class="foottable">
    <el-table
    :data="tableData"
    style="width: 100%"
    height="300px"
    >
    <el-table-column
      prop="orderNo"
      align="center"
      :label="$t('table.chargeor')"
      width="120">
    </el-table-column>
    <el-table-column
      prop="erbanNo"
      align="center"
      label="HIGO ID"
      width="90">
    </el-table-column>
    <el-table-column
      prop="nick"
      align="center"
      :label="$t('table.user')+$t('table.nick')">
    </el-table-column>
        <el-table-column
      prop="coin"
      align="center"
      :label="$t('table.chargecoin')">
    </el-table-column>
        <el-table-column
      prop="chargeTime"
      align="center"
      :label="$t('table.creattime')"
      >
    </el-table-column>
            <el-table-column
      prop="arrivalTime"
      :label="$t('table.arrived')"
     align="center"
      >
    </el-table-column>
  </el-table>
    </div>
  <el-pagination
  class="foot"
  background
  layout="prev, pager, next"
  :total="itemnum"
  :current-page.sync="pageNo"
  @current-change="handleCurrent"
  >
</el-pagination>
</div>

  </div>
</template>

<script>
import {getAdminUser,agentCoinRecord,agentRechargeCoin}from "../Util/request"
import { clctime } from "../Util/tool"
export default {
    data() {
        return {
        form: {
          userErbanNo: '',
          startTime: "",
          endTime: '',     
          coin: '',
          orderNo:"",    
        },
        tableData:[],
        mallId:'',//代理商id
        itemnum:0,
        pageNo:1,
        staticData:null,
        download:false
        }
    },
    methods: {
      onSubmit(obj) {
        let temp = {}
        for (let i in this.form) {
         if(this.form[i]){
           if(i=="endTime"){
             temp[i]=clctime(this.form[i])
           }else if(i=="startTime"){
              temp[i]=clctime(this.form[i],true)
            
           }else{
              temp[i]=this.form[i]
           }
           
         }
        }
      agentCoinRecord(res=>{
           res.data.list.forEach(el => {
              el.arrivalTime = new Date(el.arrivalTime).toLocaleString()
              el.chargeTime  = new Date(el.chargeTime).toLocaleString()
           });
           this.tableData = res.data.list
           this.itemnum =res.data.total
         },{
           mallId:this.mallId,
           ...temp,
           ...obj
         })
        agentRechargeCoin((res)=>{
          this.staticData = res.data
         },{
            mallId:this.mallId,
            ...temp,
            ...obj
         })
      this.pageNo=1
     

      },
      onhandle(obj) {
        let temp = {}
        for (let i in this.form) {
         if(this.form[i]){
           if(i=="endTime"){
             temp[i]=clctime(this.form[i])
           }else if(i=="startTime"){
              temp[i]=clctime(this.form[i],true)
            
           }else{
              temp[i]=this.form[i]
           }
           
         }
        }
      agentCoinRecord(res=>{
           res.data.list.forEach(el => {
              el.arrivalTime = new Date(el.arrivalTime).toLocaleString()
              el.chargeTime  = new Date(el.chargeTime).toLocaleString()
           });
           this.tableData = res.data.list
           this.itemnum =res.data.total
         },{
           mallId:this.mallId,
           ...temp,
           ...obj
         })
     agentRechargeCoin((res)=>{
          this.staticData = res.data
         },{
            mallId:this.mallId,
            ...temp,
            ...obj
         })

     

      },
      resetSubmit(){
        this.form={
          userErbanNo: '',
          startTime: "",
          endTime: '',     
          coin: '',
          orderNo:""
        }
        this.pageNo=1
      this.form.startTime=new Date()
      this.form.endTime=new Date()
          agentCoinRecord(res=>{
           this.itemnum =  res.data.total
           res.data.list.forEach(el => {
              el.arrivalTime = new Date(el.arrivalTime).toLocaleString()
              el.chargeTime = new Date(el.chargeTime).toLocaleString()
           });
           this.tableData = res.data.list
         },{
           mallId:this.mallId,
           startTime:clctime(new Date(),true),
           endTime:clctime(new Date())
         })
      },
      handleCurrent(e){
        
        this.onhandle({page:e})
      },
      exportclick(){
        this.download=true
        let temp = {}
        for (let i in this.form) {
         if(this.form[i]){
           if(i=="endTime"){
             temp[i]=clctime(this.form[i])
           }else if(i=="startTime"){
              temp[i]=clctime(this.form[i],true)
            
           }else{
              temp[i]=this.form[i]
           }
           
         }
        }
        agentCoinRecord(res=>{
           res.data.list.forEach(el => {
              el.arrivalTime = new Date(el.arrivalTime).toLocaleString()
              el.chargeTime  = new Date(el.chargeTime).toLocaleString()
           });
            const exportdata = res.data.list
            
          import('@/Util/Export2Excel.js').then(excel => {
          const tHeader = [this.$t('table.chargeor'),"HIGO ID",this.$t('table.user')+this.$t('table.nick'),this.$t('table.chargecoin'),this.$t('table.creattime'),this.$t('table.arrived')]
          const filterVal = ["orderNo","erbanNo","nick","coin","chargeTime","arrivalTime"]
          const list = exportdata;
          const data =  this.formatJson(filterVal,list)
          excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "HIGO AgentCharge Record",
          autoWidth: true,
          bookType: "xlsx"
          })
          this.download=false
          })








          //  this.itemnum =res.data.total
         },{
           mallId:this.mallId,
           rows:this.itemnum,
           ...temp,
           
         })


     








        },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    },
    created(){
      getAdminUser((res)=>{
         this.mallId=res.data.mallId
        
         agentCoinRecord(res=>{
           console.log(res);
           this.itemnum =  res.data.total
           res.data.list.forEach(el => {
              el.arrivalTime = new Date(el.arrivalTime).toLocaleString()
              el.chargeTime = new Date(el.chargeTime).toLocaleString()
           });
           this.tableData = res.data.list
         },{
           mallId:this.mallId,
           startTime:clctime(new Date(),true),
           endTime:clctime(new Date)
         })
         agentRechargeCoin((res)=>{
          this.staticData = res.data
         },{
            mallId:this.mallId,
            startTime:clctime(new Date(),true),
            endTime:clctime(new Date)
         })




      })


      this.form.startTime=new Date()
      this.form.endTime=new Date()
   
   
   
   
   
   
   }
}
</script>

<style lang="less" scoped>
.adrecord{
    width: 100%;
    height: 100%;
    position: relative;
    .exportbtn{
      position: absolute;
      right:00px;
      top: 400px;
      width: 130px;

    }
    .selecFrom{
        
        width: 550px;
        height: 440px;
        background-color: #fff;
        margin: 15px 0 0  25px  ;
        overflow: hidden;
        .el-form{
            margin-top: 25px ;
        }
        box-shadow: -8px -4px 19px #b7b7b7;
         /deep/.el-input__inner{
            width: 160px;
        }
        /deep/.el-form-item__label{
            font-size: 10px;
        }
        /deep/.el-form-item__conten{
            height: 20px;
            line-height: 20px;

        }
    }
    .foottable{
    
    }
}

</style>